@import "https://fonts.googleapis.com/css?family=VT323";

html {
  box-sizing: border-box;
}
:root {
  --unit: calc(15 / 100 * 1vmin);
  --color17: #90c93d;
  --color03: rgba(0, 0, 0, 0.3);
  --color02: rgba(0, 0, 0, 0.2);
  --color007: rgba(0, 0, 0, 0.07);
  --insertion-indicator: linear-gradient(
    90deg,
    var(--color007) calc(11 * var(--unit)),
    transparent 1px
  );
  --lcd-w: 298;
  --lcd-h: 64;
  --msg-padding: calc(28 * var(--unit));
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  &::before,
  &::after {
    box-sizing: inherit;
  }
}
body {
  width: 100%;
  height: 100vh;
  background: #333;
}

.lcd {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 20px auto;
  width: calc(var(--lcd-w) * var(--unit));
  height: calc(var(--lcd-h) * var(--unit));
  background: var(--color17);
  font-family: "VT323", "Courier New", "Consolas", system-ui, -apple-system-ui,
    monospace;
  text-transform: uppercase;
  padding-top: var(--msg-padding);
  border-radius: calc(4 * var(--unit));
  color: var(--color03);
  border-left: calc(11 * var(--unit)) solid var(--color17);
  border-right: calc(12 * var(--unit)) solid var(--color17);
  text-indent: 110%;
  overflow: hidden;
  white-space: nowrap;
  font-weight: normal;
  font-size: calc(27 * var(--unit));
  box-shadow: 0 calc(1 * var(--unit)) 0 0 var(--color17),
    0 0 0 calc(6 * var(--unit)) var(--color02),
    0 0 0 calc(3 * var(--unit)) var(--color02);
  background-image: linear-gradient(
      90deg,
      transparent calc(11 * var(--unit)),
      transparent 1px
    ),
    var(--insertion-indicator), var(--insertion-indicator),
    var(--insertion-indicator), var(--insertion-indicator);
  background-position: calc(0 * var(--unit)) calc(8 * var(--unit)),
    calc(0 * var(--unit)) calc(8 * var(--unit)),
    calc(12 * var(--unit)) calc(8 * var(--unit)),
    calc(0 * var(--unit)) calc(33 * var(--unit)),
    calc(12 * var(--unit)) calc(33 * var(--unit));
  background-size: calc(24 * var(--unit)) calc(24 * var(--unit));
  background-repeat: no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x;
  animation: msg 10s steps(80) infinite, blink 0.5s steps(2) infinite;
}

@keyframes blink {
  to {
    background-image: linear-gradient(
        90deg,
        var(--color03) calc(11 * var(--unit)),
        transparent 1px
      ),
      var(--insertion-indicator), var(--insertion-indicator),
      var(--insertion-indicator), var(--insertion-indicator);
  }
}

@keyframes msg {
  to {
    text-indent: -110%;
  }
}
